
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-08-16 17:42:01
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\comment\transformBox\index.tsx
 * jiu
 */
import React, { useState, useEffect } from 'react'
import './index.scss'
import { Input, Checkbox, Tag, Space,Modal } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { getColorArr } from "@/utils"
import relevance from "@/assets/svg/relevance.svg"


interface Props {
    sourcesList: any[],
    targetList: any[],
    setTargetList: Function,
    disabled: boolean
}

interface DataType {
    label: string;
    value: number;
}
let getColorArrLen = getColorArr().length
const importGlb = (url: string) => new URL(url, import.meta.url).href


const TransformBox: React.FC<Props> = ({ sourcesList, targetList, setTargetList, disabled }) => {





    //改变sourcesList字段
    let newSourcesList = sourcesList.map((item: any) => ({ label: item.label_name, value: item.label_id }))

    //改变targetList字段
    let newTargetList = targetList.map((item: any) => ({ label: item.label_name, value: item.label_id }))


    //全选id
    let allValue = newSourcesList.map((item: any) => item.value)

    //交集
    const intersect = newSourcesList.filter(source => {
        return newTargetList.some(target => target.value === source.value);
    });
    const intersectNumber = intersect.map(item => item.value)


    const [checkAll, setCheckAll] = useState(false);
    const [checkedList, setCheckedList] = useState([...intersectNumber] as number[]);
    const [indeterminate, setIndeterminate] = useState(true);
    const [tagList, SettagList] = useState([...intersect]);

    //复选框勾选
    const onChange = (list: number[]) => {
        setCheckedList(list);
        setIndeterminate(!!list.length && list.length < newSourcesList.length);
        setCheckAll(list.length === newSourcesList.length);
    };

    //全选
    const onCheckAllChange = (e: any) => {
        setCheckedList(e.target.checked ? allValue : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
    };

    // 监听复选框给 标签
    useEffect(() => {
        SettagList(newSourcesList.filter((item) => {
            if (checkedList.includes(item.value)) return item
        }))
    }, [checkedList])


    useEffect(() => {
        let map = tagList.map(item => ({ label_id: item.value, label_name: item.label }))
        setTargetList([...map])
        setrightSearch([...tagList])
    }, [tagList])

    //标签删除 操作复选框
    const tagClose = (e: any, i: any) => {
        e.preventDefault();
        confirm(i)
    }

    let [leftSearch, setLeftSearch] = useState([...newSourcesList])  //左边搜索框]

    let [rightSearch, setrightSearch] = useState([...tagList])  //右边搜索框]


    const leftInput = (e) => {
        console.log(e.target.value);
        let value = e.target.value
        let search = newSourcesList.filter(item => item.label.includes(value))
        setLeftSearch([...search])
    }
    const rightInput = (e) => {
        console.log(e.target.value);
        let value = e.target.value
        let search = tagList.filter(item => item.label.includes(value))
        setrightSearch([...search])
    }


    //删除确认框
    const [modal, contextHolder] = Modal.useModal();

   //删除确认框
   const confirm = (i) => {
    modal.confirm({
        title: '删除',
        content: '是否将该条规则从列表中删除？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
            SettagList(tagList.filter(item => item.value !== i.value))
            setCheckedList(checkedList.filter(item => item !== i.value))
        },
    });
};


    return (
        <div className='TransformBox'>
            {!disabled && <div className='left'>
                <div className='left-top'><Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}></Checkbox> 标签列表</div>
                <div className='left-bottom'>

                    <Input prefix={<SearchOutlined style={{ color: "#1677ff" }} />} placeholder="请输入关键字" onChange={leftInput} />


                    <div className='warp'>
                        <div className='left-bottom-list'>
                            <Checkbox.Group options={leftSearch} onChange={onChange} value={checkedList} style={{ display: 'grid' }} />
                        </div>
                    </div>
                </div>
            </div>}
            {!disabled && <div className='middle'><img src={relevance} alt="" /></div>}

            <div className='right' >

                <div className={`left-top ${disabled?'left-topWidth ':''}`}> 已添加标签</div>

                <div className={`left-bottom  ${disabled?'left-bottomWidth ':''}` } >
                    <Input prefix={<SearchOutlined style={{ color: "#1677ff" }} />} placeholder="请输入关键字" onChange={rightInput} disabled={false} />

                    <div className='warp'>
                        <div className='left-bottom-list'>
                            <Space direction={disabled?"horizontal":"vertical"} size={[1,1]}  wrap={true} >
                                {rightSearch.length > 0 && rightSearch.map((item, index) => {
                                    return <Tag color={getColorArr()[index % getColorArrLen]} key={index} style={{ marginTop: "5px" }} onClose={(e) => { tagClose(e, item) }} closable={!disabled}  >{item?.label}</Tag>
                                })}
                            </Space>
                        </div>
                    </div>
                </div>
            </div>
               {/* 删除确认对话框 */}
               {contextHolder}
        </div>
    )
}

export default TransformBox
